<template>
	<view class="container" :style="{width:windowWidth+'px',height:windowHeight+'px'}">
		<cu-custom :bgLiner="true">
			<block slot="content">签到</block>
		</cu-custom>
		<view class="address_con">
			<view class="box">
				<map style="width: 100%; height: 300px;" :latitude="latitude" :longitude="longitude" :markers="covers"
					:circles="circles">
				</map>
				<view class="local-wrap" @click="mapLocalClick">
					<image src="/static/img/get-local.png" class="get-local" mode=""></image>
				</view>
				<!-- <map id="myMap" style="width: 100%; height: 300px;"></map> -->
			</view>
			<view class="address_1">电子围栏：<text class="text">{{info.address}}{{kilometre}}米内</text></view>
			<view class="address_2 flex flex-wrap justify-start align-center ">
				<image src="/static/img/local-gray.png"
					style="margin-right: 20rpx;min-width: 25rpx;width: 25rpx;height: 30rpx;"></image>
				<text>{{sign_in_address||currentAddress}}</text>
			</view>
			<view class="remark">{{!inRange ?'您不在打卡范围':'您已在打卡范围'}}</view>
		</view>
		<view class="date_con">
			<view class="flex justify-space-between align-center m-b-15 p-r-15">
				<view class="">{{date}}</view>
				<view class="f-13">
					已打卡{{visit_num}}次
				</view>
			</view>

			<view class="remark">拍照</view>
			<view class="upload">
				<!-- <view class="example-body">
               				<uni-file-picker
                            v-model="imageValue"
                            file-mediatype="image"
                             :limit="1"
                             mode="grid"
                             file-extname="png,jpg"
                             @select="fileSelect"
                              @fail="fileFail" 
                              @success="fileSuccess"
                               limit="3">
                               </uni-file-picker>
               </view> -->
				<view class="position-rel m-r-10" v-show="imageValue">
					<image :src="imageValue" class="add-s" @click="preImg()"></image>
					<image src="/static/img/del-gray.png" class="del-gray" @click="delImg"></image>
				</view>
				<view class="" v-show="!imageValue">
					<image src="/static/img/add-s.png" class="add-s" @click="upImg"></image>
				</view>
			</view>
		</view>
		<view @click="signInHadle" class="footer">
			<view class="box">
				<view class="name">签到打卡</view>
				<view class="num">{{nowDate}}</view>
			</view>
		</view>
		<uni-popup ref="popup" type="center" :animation="false" style="z-index: 200;">
			<view class="popup_content">
				<view class="image_success">
					<image style="width: 200rpx;height: 200rpx;" src="/static/img/success.png"></image>
				</view>
				<view class="name">签到成功</view>
				<view class="date">签到时间：{{signInTime}}</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import wx from 'weixin-js-sdk';
	let timer, timerLocal;
	import {
		parseTime
	} from '@/common/date.js';
	export default {
		data() {
			return {
				windowHeight: 650,
				windowWidth: 375,
				date: '',
				nowDate: '',
				imageValue: '',
				sign_in_address: '',
				timer: null,
				timerLocal: null,
				signInTime: '',
				longitude: 0,
				latitude: 0,
				covers: [{
						id: 1,
						longitude: 0, //'106.516012'
						latitude: 0, //'29.51036'
						iconPath: '/static/img/local-business.png',
						width: 32,
						height: 41
					},
					// {
					// 	id: 2,
					// 	longitude: 0,
					// 	latitude: 0,
					// 	iconPath: '/static/img/local-mine.png',
					// 	width: 32,
					// 	height: 41,
					// 	callout: null
					// },
				],
				callout: {
					bgColor: '#10c1b7',
					content: '已进入打卡范围',
					color: '#ffffff',
					fontSize: 12,
					padding: 6,
					borderRadius: 5,
					display: 'ALWAYS'
				},
				circles: [{
					longitude: 0,
					latitude: 0,
					color: '#91d4e444', // 33表示20%透明度(十六进制)
					fillColor: '#91d4e444', // 22表示13%透明度
					radius: 300, // 1000米=1公里
					strokeWidth: 2
				}],
				clients_id: 0,
				id: 0,
				info: {},
				kilometre: 100,
				distance: 100,
				locationUpdateTimer: null,
				visit_num: 0,

				map: null, // 地图实例
				companyMarker: null, // 企业标记点
				userMarker: null, // 用户标记点
				rangeCircle: null, // 范围圆
				infoWindow: null, // 信息窗口

				companyData: null, // 企业数据 {lng, lat, radius, address}
				userLngLat: [], // 用户当前经纬度

				currentAddress: '定位中...', // 当前地址
				rangeRadius: 0, // 打卡范围半径
				inRange: false, // 是否在范围内

				// 图片路径 - 请替换为你的实际图片路径
				// companyIcon: '/static/img/local-business.png',
				// userIcon: '/static/img/local-mine.png',
				companyIcon: 'https://yunpin-video-record.oss-cn-shanghai.aliyuncs.com/wx-sz/20250330/555a80cf0c9d480af6e42a3eac16d1df4771dbee825954adc5b29c48796f8998.png',
				userIcon: 'https://yunpin-video-record.oss-cn-shanghai.aliyuncs.com/wx-sz/20250330/562ec4b4fb5a881b81b1fde68727ac06e8f4a16507148f6dd935f814de369702.png',

				amapKey: '6de42e97fba40c5ef40205554b2acd55', // 替换为你的高德地图Key
				locationCompleteListener: null,
				locationErrorListener: null,
				wUrl: '',
				currentPageUrl:''
			}
		},
		onUnload() {
			clearInterval(timer);
			clearInterval(timerLocal);
			// uni.stopLocationUpdate();
		},
		onLoad(option) {
			console.log('currentUrl',this.$store.state.currentUrl)
			if (option.id) {
				this.id = option.id;
			}
			if (option.clients_id) {
				this.clients_id = option.clients_id;
				// https://sales.yunpintech.com/sale/pages/system/signIn?id=18&clients_id=22
				// let wUrl = `${this.$domain}pages/system/signIn?id=${this.id}&clients_id=${this.clients_id}`;
				// this.wUrl = wUrl;
				
				if (this.isWeixin()) {
					this.getToken();
				} else {
					this.getInfo();
				}
			}
			this.windowHeight = uni.getSystemInfoSync().windowHeight;
			this.windowWidth = uni.getSystemInfoSync().windowWidth;
			let time = new Date().getTime()
			let date = parseTime(time, '{m}-{d} ' + ' 星期' + '{a}')
			this.date = date
			const _this = this
			clearInterval(timer);
			timer = setInterval(() => {
				_this.nowDate = parseTime(new Date().getTime(), '{h}:{i}:{s}')
			}, 1000)
		},
		onShow() {
			
		},
		methods: {
			isWeixin() {
				var ua = window.navigator.userAgent.toLowerCase();
				if (ua.match(/MicroMessenger/i) == 'micromessenger') {
					return true;
				} else {
					return false;
				}
			},
			isIOSWechat() {
			  const ua = navigator.userAgent.toLowerCase();
			  return /iphone|ipad|ipod/.test(ua) && /micromessenger/.test(ua);
			},
			getToken() {
				console.log(location.href, 'config1')
				let url = '';
				url = location.href.split('#')[0];
				this.wUrl = url;
				// let platform = uni.getSystemInfoSync().platform;
				// if(platform=='ios'&& this.isWeixin()){
				// 	url = currentUrl
				// }
				
				let data = {
					// url: 'http://xmtzx.cqyouths.com/index/index/noPublic.html'
					url
				}
				this.$http('/api/getPositioningTicket', data).then(res => {
					console.log(res, 'config1');
					wx.config({
						debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
						appId: res.data.appId, // 必填，公众号的唯一标识
						timestamp: res.data.jsTimesTamp, // 必填，生成签名的时间戳
						nonceStr: res.data.jsNonceStr, // 必填，生成签名的随机串
						signature: res.data.jsSignature, // 必填，签名
						jsApiList: ['getLocation'] ,// 必填，需要使用的JS接口列表
					});
					setTimeout(()=>{
						this.getInfo();
					},500)
					
				})
			},
			fileSelect(file) { // 文件选择
				console.log(file)
			},
			fileFail(file) { // 上传失败
				console.log(file)
			},
			fileSuccess(file) { // 上传成功
				console.log(file)
			},
			getInfo() {
				let data = {

				}
				this.$http('/api/clientDetail/' + this.clients_id, data, 'get').then(res => {
					if (res.code == 200) {
						let datas = res.data;
						this.visit_num = datas.visit_num || 0;
						this.info = datas.info;
						this.kilometre = datas.kilometre ? parseFloat(datas.kilometre) * 1000 : 100;
						let longitude = this.info.longitude ? parseFloat(this.info.longitude) : '';
						let latitude = this.info.latitude ? parseFloat(this.info.latitude) : '';
						this.circles = [{
							longitude: longitude,
							latitude: latitude,
							color: '#91d4e444', // 33表示20%透明度(十六进制)
							fillColor: '#91d4e444', // 22表示13%透明度
							radius: this.kilometre, // 1000米=1公里
							strokeWidth: 2
						}];
						this.longitude = longitude;
						this.latitude = latitude;
						this.covers[0].longitude = longitude;
						this.covers[0].latitude = latitude;
						// console.log(this.reverseGeocodeByAPI(longitude,latitude))
						if (this.isWeixin()) {
							console.log('isWeixin')
							let that = this;
							wx.ready(function() {
								// uni.showModal({
								// 	title: 'config成功',
								// 	content: '当前页面url:' + that.wUrl
								// })
								that.getMineWxLocation();
								// uni.showModal({
								// 	title: '申请获取位置',
								// 	content: '是否允许当前页面获取位置信息?',
								// 	success: (localsuc) => {
								// 		if(localsuc.confirm){
								// 			that.getMineWxLocation();
								// 		}
								// 	}
								// })
							});
							wx.error(function(rej) {
								// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
								window.location.reload();
								// uni.showModal({
								// 	title: 'config失败',
								// 	content: JSON.stringify(rej) + '，当前页面url:' + that.wUrl,
								// 	success: (resss) => {
								// 		if(resss.confirm){
								// 			 window.location.reload();
								// 		}
								// 	}
								// })
							})
						} else {
							console.log('noWeixin')
							this.getMineLocation();
						}
						// 假设返回数据结构为 {lng: 经度, lat: 纬度, radius: 范围(米), address: "企业地址"}
						this.companyData = {
							lng: this.info.longitude,
							lat: this.info.latitude,
							radius: this.kilometre,
							address: this.info.address
						};
						this.companyAddress = this.info.address;
						this.rangeRadius = this.kilometre;


					}
				})
			},
			async reverseGeocodeByAPI(lng, lat) {
				lng = parseFloat(lng);
				lat = parseFloat(lat);
				const key = 'f75bf7a08253d98905ea8c7b6010f04e';
				const url =
					`https://restapi.amap.com/v3/geocode/regeo?key=${key}&location=${lng},${lat}&radius=100&extensions=base`;
				return new Promise(function(resolve, reject) {
					uni.request({
						url,
						method: 'get',
						success: (res) => {
							console.log(res)
							if (res.data.status === '1') {
								resolve(res.data.regeocode.formatted_address);
							} else {
								throw new Error(res.data.info);
							}
						},
						fail: (rej) => {
							console.log(rej)
							reject({
								error: '获取位置信息失败'
							});
						}
					})
				})

			},

			updateMarker(position) {
				// 1. 清空用户标记（保留企业标记）
				this.covers = [this.covers[0]];

				// 2. 下一帧添加新标记
				this.$nextTick(() => {
					this.covers = [
						this.covers[0],
						{
							id: `user-${Date.now()}`,
							longitude: position.lng,
							latitude: position.lat,
							iconPath: '/static/img/local-mine.png',
							width: 32,
							height: 41,
							callout: {
								...this.callout
							}
						}
					];
				});
			},
			updateMarker2(position) {
				// 1. 清空用户标记（保留企业标记）
				this.covers = [this.covers[0]];

				// 2. 下一帧添加新标记
				this.$nextTick(() => {
					this.covers = [
						this.covers[0],
						{
							id: `user-${Date.now()}`,
							longitude: position.lng,
							latitude: position.lat,
							iconPath: '/static/img/local-mine.png',
							width: 32,
							height: 41,
							callout: null
						}
					];
				});
			},
			mapLocalClick() {
				if (this.isWeixin()) {
					this.getMineWxLocation();
				} else {
					this.getMineLocation();
				}
			},
			getMineWxLocation() {
				uni.showLoading({
					title: '获取位置...'
				})
				wx.getLocation({
					type: 'gcj02',
					timeout: 10000,
					success: (ress) => {
						// uni.showModal({
						// 	title: '获取成功',
						// 	content: JSON.stringify(ress)
						// })
						uni.hideLoading();
						console.log('当前位置的经度：' + ress.longitude);
						console.log('当前位置的纬度：' + ress.latitude);
						let pos1 = {
							lng: ress.longitude,
							lat: ress.latitude
						};
						let distance1 = this.$util.calculateDistance(this.latitude, this.longitude, ress
							.latitude, ress.longitude);
						this.inRange = distance1 <= this.kilometre;
						if (this.inRange) {
							this.updateMarker(pos1);
						} else {
							this.updateMarker2(pos1);
						}
						this.reverseGeocodeByAPI(ress.longitude, ress.latitude).then(address1 => {
							this.sign_in_address = address1 ? address1 : '';
							this.currentAddress = address1 ? address1 : '定位中...';
						});
					},
					fail: (err) => {
						uni.hideLoading();
						console.error('位置获取失败:', err)
						if (err.errMsg.includes("timeout")) {
							uni.showToast({
								title: '获取位置超时，请检查手机定位服务是否开启',
								icon: 'none'
							})
						}
						// uni.showModal({
						// 	title: '获取失败',
						// 	content: JSON.stringify(ress)
						// })
					}
				});
			},
			getMineLocation() {
				uni.showLoading({
					title: '获取位置...'
				})
				uni.getLocation({
					type: 'gcj02 ',
					isHighAccuracy: true,
					success: (ress) => {
						uni.hideLoading();
						console.log('当前位置的经度：' + ress.longitude);
						console.log('当前位置的纬度：' + ress.latitude);
						let pos1 = {
							lng: ress.longitude,
							lat: ress.latitude
						};
						let distance1 = this.$util.calculateDistance(this.latitude, this.longitude, ress
							.latitude, ress.longitude);
						this.inRange = distance1 <= this.kilometre;
						if (this.inRange) {
							this.updateMarker(pos1);
						} else {
							this.updateMarker2(pos1);
						}
						this.reverseGeocodeByAPI(ress.longitude, ress.latitude).then(address1 => {
							this.sign_in_address = address1 ? address1 : '';
							this.currentAddress = address1 ? address1 : '定位中...';
						});
						// setTimeout(() => {
						// 	this.localChange();
						// }, 300)
					},
					fail: (err) => {
						uni.hideLoading();
						console.error('位置获取失败:', err)
					}
				});
				// const positions = [
				//         { lng: '106.517013', lat: '29.51137' },
				//         { lng: '106.518013', lat: '29.51237' },
				//         { lng: '106.519013', lat: '29.51337' },
				// 		{ lng: '106.519113', lat: '29.51337' },
				// 		{ lng: '106.519213', lat: '29.51337' }
				//       ];

				//       positions.forEach((pos, i) => {
				//         setTimeout(() => this.updateMarker(pos), (i + 1) * 1000);
				//       });

			},
			localChange() {
				uni.startLocationUpdate({
					success: () => {
						console.log('开始接收位置')
						uni.onLocationChange((res) => {
							clearTimeout(this.locationUpdateTimer);
							this.locationUpdateTimer = setTimeout(() => {
								console.log('位置变化:', res)
								let pos = {
									lng: res.longitude,
									lat: res.latitude
								};
								let distance = this.$util.calculateDistance(this.latitude, this
									.longitude, res.latitude, res.longitude);
								this.distance = distance;
								this.inRange = distance <= this.kilometre;
								if (this.inRange) {
									this.updateMarker(pos);
								} else {
									this.updateMarker2(pos);
								}
								this.reverseGeocodeByAPI(res.longitude, res.latitude).then(
									address => {
										this.sign_in_address = address ? address : '';
										this.currentAddress = address ? address : '定位中...';
									});
							}, 5000)
						})
					},
					fail: (err) => {
						console.error('启动位置更新失败:', err)
					}
				})
			},
			upImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'],
					success: (res) => {
						console.log(res)
						let file = res.tempFiles[0];
						this.$util.uploadService(file, (e) => {
							console.log(e)
							this.imageValue = e;
						})
					}
				})
			},
			delImg() {
				this.imageValue = '';
			},
			signInHadle() {
				// let distance = this.$util.calculateDistance(this.covers[0].latitude, this.covers[0].longitude, this.covers[
				// 	1].latitude, this.covers[1].longitude);
				// if (distance > this.kilometre) {
				// 	uni.showToast({
				// 		title: '您不在打卡范围',
				// 		icon: 'none'
				// 	})
				// 	return;
				// }
				if (!this.inRange) {
					uni.showToast({
						title: '您不在打卡范围',
						icon: 'none'
					})
					return;
				}

				if (this.imageValue == '') {
					uni.showToast({
						title: '请先拍照',
						icon: 'none'
					})
					return;
				}
				let data = {
					id: this.id,
					longitude: this.longitude,
					latitude: this.latitude,
					sign_in_address: this.sign_in_address,
					sign_in_img: this.imageValue
				}
				this.$http('/api/visitsSignIn', data, 'get').then(res => {
					if (res.code == 200) {
						this.$refs.popup.open()
						let time = new Date().getTime()
						this.signInTime = parseTime(time, '{h}:{i}')
						this.visit_num = this.visit_num + 1;
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						})
					}
				})
			},
			preImg() {
				uni.previewImage({
					urls: [this.imageValue],
					current: 0
				})
			},

			async initMap() {
				try {
					// 确保AMap对象加载完成
					if (!window.AMap) {
						await this.loadAMapSDK();
					}

					// 确保插件加载完成
					await this.loadAMapPlugins(['AMap.Geolocation']);

					this.setupMap();
				} catch (error) {
					console.error('地图初始化失败:', error);
					uni.showToast({
						title: '地图初始化失败，请刷新重试',
						icon: 'none'
					});
					// 5秒后重试
					setTimeout(() => this.initMap(), 5000);
				}
			},

			// 加载高德地图SDK
			loadAMapSDK() {
				return new Promise((resolve, reject) => {
					if (window.AMap) {
						resolve();
						return;
					}

					const script = document.createElement('script');
					script.src =
						`https://webapi.amap.com/maps?v=2.0&key=${this.amapKey}&plugin=AMap.WebGLRenderer`;
					script.onload = resolve;
					script.onerror = reject;
					document.head.appendChild(script);
				});
			},

			// 加载高德地图插件
			loadAMapPlugins(plugins) {
				return new Promise((resolve) => {
					if (!window.AMap || !AMap.plugin) {
						setTimeout(() => this.loadAMapPlugins(plugins), 100);
						return;
					}

					AMap.plugin(plugins, resolve);
				});
			},

			setupMap() {
				// 创建地图实例
				this.map = new AMap.Map('myMap', {
					viewMode: '2D',
					zoom: 15,
					resizeEnable: true
				});

				// 添加基本控件
				// this.map.addControl(new AMap.ToolBar());
				// this.map.addControl(new AMap.Scale());

				// 初始化企业标记
				if (this.companyData) {
					this.updateCompanyMarker();
				}

				// 开始定位
				this.startLocation();
			},

			// 更新企业标记
			updateCompanyMarker() {
				// 移除旧的标记和范围圈
				if (this.companyMarker) {
					this.map.remove(this.companyMarker);
				}
				if (this.rangeCircle) {
					this.map.remove(this.rangeCircle);
				}

				// 创建企业标记 - 使用图片
				this.companyMarker = new AMap.Marker({
					position: new AMap.LngLat(this.companyData.lng, this.companyData.lat),
					icon: new AMap.Icon({
						image: this.companyIcon, // 企业图标
						size: new AMap.Size(32, 41), // 图标大小
						imageSize: new AMap.Size(32, 41) // 图片实际大小
					}),
					offset: new AMap.Pixel(-18, -18) // 图标偏移
				});

				// 创建范围圆
				this.rangeCircle = new AMap.Circle({
					center: new AMap.LngLat(this.companyData.lng, this.companyData.lat),
					radius: this.companyData.radius, // 半径，单位：米
					strokeColor: "#91d4e4", // 线颜色
					strokeOpacity: 0.5, // 线透明度
					strokeWeight: 1, // 线粗细度
					fillColor: "#91d4e4", // 填充颜色
					fillOpacity: 0.15 // 填充透明度
				});

				// 添加到地图
				this.map.add(this.companyMarker);
				this.map.add(this.rangeCircle);

				// 设置地图中心点
				this.map.setCenter([this.companyData.lng, this.companyData.lat]);
			},

			startLocation() {
				// 安全检查
				if (!window.AMap || !AMap.Geolocation) {
					console.warn('AMap.Geolocation not available, retrying...');
					setTimeout(() => this.startLocation(), 200);
					return;
				}

				const geolocation = new AMap.Geolocation({
					enableHighAccuracy: true,
					timeout: 10000,
					buttonPosition: 'RB'
				});

				this.map.addControl(geolocation);
				clearInterval(timerLocal)
				timerLocal = setInterval(() => {
					geolocation.getCurrentPosition();
				}, 5000)


				// 安全的事件监听方式
				const addSafeListener = (target, event, handler) => {
					// 优先使用AMap.event
					if (AMap.event && AMap.event.addListener) {
						return AMap.event.addListener(target, event, handler);
					}
					// 备用方案
					if (target.on) {
						const listener = (...args) => handler(...args);
						target.on(event, listener);
						return {
							remove: () => target.off(event, listener)
						};
					}
					console.error('无法添加事件监听');
					return {
						remove: () => {}
					};
				};

				// 添加事件监听
				this.locationCompleteListener = addSafeListener(
					geolocation,
					'complete',
					(data) => this.handleLocationSuccess(data)
				);

				this.locationErrorListener = addSafeListener(
					geolocation,
					'error',
					(error) => this.handleLocationError(error)
				);
			},

			// 在组件销毁时移除监听
			beforeDestroy() {
				if (this.locationCompleteListener) {
					this.locationCompleteListener.remove();
				}
				if (this.locationErrorListener) {
					this.locationErrorListener.remove();
				}
			},

			// 定位成功处理
			handleLocationSuccess(data) {
				this.userLngLat = [data.position.lng, data.position.lat];
				this.currentAddress = data.formattedAddress || '未知位置';
				if (data.formattedAddress) {
					this.sign_in_address = data.formattedAddress
				}
				// 更新用户标记
				this.updateUserMarker();

				// 检查是否在范围内
				this.checkInRange();
			},

			// 定位失败处理
			handleLocationError(error) {
				console.error('定位失败:', error);
				this.currentAddress = '定位失败，请检查定位权限';
			},

			// 更新用户标记
			updateUserMarker() {
				// 移除旧的标记
				if (this.userMarker) {
					this.map.remove(this.userMarker);
				}
				if (this.infoWindow) {
					this.map.remove(this.infoWindow);
				}

				// 创建用户标记 - 使用图片
				this.userMarker = new AMap.Marker({
					position: new AMap.LngLat(...this.userLngLat),
					icon: new AMap.Icon({
						image: this.userIcon, // 用户图标
						size: new AMap.Size(32, 41), // 图标大小
						imageSize: new AMap.Size(32, 41) // 图片实际大小
					}),
					offset: new AMap.Pixel(-18, -18) // 图标偏移
				});

				// 添加到地图
				this.map.add(this.userMarker);

				// 如果在范围内，显示信息窗口
				if (this.inRange) {
					this.infoWindow = new AMap.InfoWindow({
						content: '<div class="info-window">已处在打卡范围</div>',
						offset: new AMap.Pixel(0, -30)
					});
					this.infoWindow.open(this.map, this.userMarker.getPosition());
				}
			},

			// 检查是否在范围内
			checkInRange() {
				if (!this.companyData || !this.userLngLat.length) return;

				// 计算两点间距离(米)
				const distance = AMap.GeometryUtil.distance(
					new AMap.LngLat(this.companyData.lng, this.companyData.lat),
					new AMap.LngLat(...this.userLngLat)
				);

				this.inRange = distance <= this.companyData.radius;

				// 更新用户标记
				this.updateUserMarker();
			},
		}
	}
</script>

<style lang="less" scoped>
	.popup_content {
		text-align: center;
		width: 90%;
		min-width: 550rpx;
		min-height: 600rpx;
		background-color: #fff;
		border-radius: 20rpx;
		padding-top: 100rpx;

		.image_success {}

		.name {
			text-align: center;
			font-size: 40rpx;
			margin: 37rpx 0;
		}

		.date {
			text-align: center;
			font-size: 30rpx;
			color: #999;
		}
	}

	.container {
		.date_con {

			font-size: 30rpx;
			width: 100%;
			padding-left: 78rpx;


			.upload {
				margin-top: 30rpx;
				display: flex;

				.add-s {
					width: 160rpx;
					height: 160rpx;
				}

				.del-gray {
					width: 36rpx;
					height: 36rpx;
					position: absolute;
					top: -10rpx;
					right: -10rpx;
					z-index: 2;
				}
			}
		}

		.address_con {
			min-height: 300rpx;
			width: 750rpx;
			font-size: 28rpx;
			border-bottom: 1px solid #eee;
			padding-bottom: 40rpx;
			margin-bottom: 40rpx;

			.box {
				width: 100%;
				background-color: #ccc;
				text-align: center;
				line-height: 300rpx;
				margin-bottom: 20rpx;
				position: relative;
			}

			.address_1 {
				padding: 0 32rpx;
				color: #999;
				margin-bottom: 20rpx;
				box-sizing: border-box;

				.text {
					color: #4072F4
				}
			}

			.address_2 {
				box-sizing: border-box;
				padding: 0 32rpx;
				margin-bottom: 20rpx;
			}

			.remark {
				padding-left: 78rpx;
				color: #999;
			}
		}

		.footer {
			margin-top: 50rpx;
			width: 100%;
			padding-bottom: 80rpx;

			.box {
				margin: auto;
				text-align: center;
				width: 260rpx;
				height: 260rpx;
				border-radius: 50%;
				background-image: url("@/static/img/signIn.png");
				background-size: 100% 100%;
				color: #fff;
				padding-top: 80rpx;

				.name {
					font-size: 34rpx;
					margin-bottom: 16rpx;
				}

				.num {
					font-size: 32rpx;
					opacity: 0.8;
				}
			}
		}
	}

	/* 信息窗口样式 */
	.info-window {
		background-color: #10c1b7;
		color: white;
		padding: 3px 8px;
		border-radius: 4px;
		font-size: 12px;
	}

	.local-wrap {
		background: #fff;
		padding: 10rpx;
		position: absolute;
		left: 20rpx;
		bottom: 20rpx;
		z-index: 100;
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
	}

	.get-local {
		width: 40rpx;
		height: 40rpx;
	}
</style>